<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		*{
			padding:0;
			margin:0;
		}
		body{
			height:1000px;
		}
		.big{
			position:relative
		}
		.box{
			width:800px;
			height:400px;
			position:relative;
			left:20%;
			top:20%;
		}
		img{
			width: 100%;
			height: 100%;
			position:absolute;
		}
		.p{
			width:200px;
			height:20px;
			position:absolute;
			top:90%;
			left:65%;
		}
		.p span{
			display: block;
			width:20px;
			height:20px;
			float:left;
			margin-right:10px;
			background:#fff;
		}
		.p .active{
			background:red;
		}
		h6{
			width:100px;
			height:20px;
			position:absolute;
			right:240px;
			bottom: 360px;
		}
		h6 i{
			display: block;
			width:40px;
			height:20px;
			float:left;
			margin-right: 10px;
			background:#fff;
		}
		.box22{
			width:100px;
			height:200px;
			background:red
		}
		.box33{
			width:100px;
		}
	</style>
	<body>
		<div class="big">
			<div class="box">
				<img src="img/img1.png"/>
				<img src="img/img2.png"/>
				<img src="img/img3.png"/>
				<img src="img/img4.png"/>
				<img src="img/img5.png"/>
			</div>
			<p class="p">
				<span class = "active">1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
				<span>5</span>
			</p>
			<h6>
				<i class="left"><<<</i>
				<i class="right">>>></i>
			</h6>
		</div>
		<div class="box22"></div>
	</body>
</html>
<script src="jquery-1.11.3.js"></script>
<script type="text/javascript">
	$(function(){
		/*function Caro(){};
		Caro.prototype.init=function(){
			this.img = $("img");
			this.box = $(".box")
			this.p = $(".p")
			this.big = $(".big")
			this.timer= null;
			this.n = 0;
			this.time();
			this.span = $("span");
			var that = this;
			this.span.on("click",function(){
				that.lick(this)				
			})
			this.big.mouseenter(function(){
				clearInterval(that.timer);
			})
			this.big.mouseleave(function(){
				that.leave()				
			})			
		}
		Caro.prototype.time=function(){
			var that = this;
			clearInterval(this.timer);
			this.timer = setInterval(function(){
				if(that.n >= that.img.length - 1){
					that.n = 0;
				}else{
					that.n++
				}
				that.img.eq(that.n).stop().fadeIn().siblings().fadeOut();
				that.span.eq(that.n).addClass("active").siblings().removeClass("active")
			},800)
		}
		Caro.prototype.lick=function(res){
				
			this.n=$(res).index();
			$(res).addClass("active").siblings().removeClass("active")
			this.img.eq(this.n).stop().fadeIn().siblings().fadeOut();
		}
		Caro.prototype.leave=function(){
			this.time();
		}
		var caro = new Caro();
		caro.init()*/
		function caro(){
			var timer = null;
			var img = $("img");
			var span = $("span");
			var n = 0;
			var big = $(".big");
			var right = $(".right");
			var left = $(".left");
			function fn(){
				clearInterval(timer);
				timer = setInterval(function(){
					if(n >= img.length - 1){
					n = 0;
					}else{
						n++
					}
					img.eq(n).stop().fadeIn().siblings().fadeOut();
					span.eq(n).addClass("active").siblings().removeClass("active")
				},1000)	
			}	
			fn()			
			big.mouseenter(function(){
				clearInterval(timer);
			})			
			big.mouseleave(function(){
				fn()
			})
			span.mouseenter(function(){
				n = $(this).index();
				img.eq(n).stop().fadeIn().siblings().fadeOut();
				span.eq(n).addClass("active").siblings().removeClass("active")
			})
			right.click(function(){
				if(n >= img.length - 1){
					n = 0;
				}else{
					n++
				}
				img.eq(n).stop().fadeIn().siblings().fadeOut();
				span.eq(n).addClass("active").siblings().removeClass("active")
			})
			left.click(function(){
				if(n <= 0){
					n = img.length - 1;
				}else{
					n--
				}
				img.eq(n).stop().fadeIn().siblings().fadeOut();
				span.eq(n).addClass("active").siblings().removeClass("active")
			})
		}
			caro()
	})
</script>

